<template>
	<view class="my-container-box">
		<!-- 登录页 -->
		<view class="my-login-box" v-if="!openId">
			<u-icon name="account-fill" color="#dcdcdc" size="200"></u-icon>
			<button class="loign-btn" type="primary" @click="login">一键登录</button>
			<text class="text">登录后尽享更多权益</text>
		</view>
		<!-- 用户登录后的详情页 -->
		<view v-else>
			<view class="top-container-box">
				<view class="user-box">
					<image class="user-img" :src="vuex_url + '/static/my-icon/bg.png'"></image>
					<u-avatar size="114" :src="vuex_user.avatarUrl"></u-avatar>
					<view class="user-text-box">
						<text>{{ vuex_user.nickName }}</text>
						<navigator class="text2" url="/myPackageA/pages/views/user-data-detail">查看个人资料</navigator>
					</view>
				</view>

				<view class="item-box">
					<!-- 每一个功能项 -->
					<navigator class="item" url="/myPackageA/pages/views/my-orders">
						<u-image width="46rpx" height="46rpx" :src="vuex_url + '/static/my-icon/wddd.png'"></u-image>
						<view class="u-m-t-12">我的订单</view>
					</navigator>
					<navigator class="item" url="/myPackageA/pages/views/customer-evaluation">
						<u-image width="37rpx" height="47rpx" :src="vuex_url + '/static/my-icon/khpj.png'"></u-image>
						<view class="u-m-t-12">客户评价</view>
					</navigator>
					<navigator class="item" url="/myPackageA/pages/views/my-posts">
						<u-image width="46rpx" height="46rpx" :src="vuex_url + '/static/my-icon/wdtz.png'"></u-image>
						<view class="u-m-t-12">我的帖子</view>
					</navigator>
					<!-- <navigator class="item" url="/myPackageA/pages/views/my-comments">
						<u-image width="38rpx" height="46rpx" :src="vuex_url + '/static/my-icon/wdpl.png'"></u-image>
						<view class="u-m-t-12">我的评论</view>
					</navigator> -->
					<navigator class="item" url="/myPackageA/pages/views/my-money">
						<u-image width="46rpx" height="49rpx" :src="vuex_url + '/static/my-icon/qbgl.png'"></u-image>
						<view class="u-m-t-12">钱包管理</view>
					</navigator>
					<navigator class="item" url="/myPackageA/pages/views/my-join">
						<u-image width="44rpx" height="37rpx" :src="vuex_url + '/static/my-icon/wdcy.png'"></u-image>
						<view class="u-m-t-12">我的参与</view>
					</navigator>
					<navigator class="item" url="/myPackageA/pages/views/my-giveup-items">
						<u-image width="44rpx" height="42rpx" :src="vuex_url + '/static/my-icon/wddz.png'"></u-image>
						<view class="u-m-t-12">我的点赞</view>
					</navigator>
					<navigator class="item" url="/myPackageA/pages/views/my-integral">
						<u-image width="44rpx" height="42rpx" :src="vuex_url + '/static/my-icon/wddd.png'"></u-image>
						<view class="u-m-t-12">我的积分</view>
					</navigator>
				</view>
			</view>
			<!-- 底部的 推荐、关于、联系、入驻 模块 -->
			<view class="bottom--container-box">
				<view class="bottom-item-box" @click="bottomItemClick(titles.type_id)" v-for="titles in titleList" :key="titles.type_id">
					<text class="title">{{ titles.title }}</text>
					<u-icon name="arrow-right" color="#E7EAF0"></u-icon>
				</view>
			</view>
		</view>

		<!-- 分享模态框 -->
		<view class="share-container-box" v-if="shareModelShow">
			<view class="share-box" @click="shareModelShow = false">
				<u-image width="544" height="958" :src="vuex_url + '/static/imgs/ljfx-img.jpg'"></u-image>
				<u-button :custom-style="shareBtnStyle" shape="circle" :hair-line="false" open-type="share">立即分享</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 存储用户登录后的唯一标识
			openId: '',
			// 头像路径
			src: '',
			// 底部的 推荐、关于、联系、入驻 模块的数据列表
			titleList: [
				{
					type_id: 1,
					title: '推荐给好友'
				},
				{
					type_id: 2,
					title: '关于律小哥'
				},
				{
					type_id: 3,
					title: '联系平台客服'
				},
				{
					type_id: 4,
					title: '入驻律小二'
				}
			],
			// 控制分享模态框的显示与隐藏
			shareModelShow: false,
			// 立即分享按钮的样式
			shareBtnStyle: {
				width: '544rpx',
				height: '90rpx',
				backgroundColor: '#E63E1D',
				color: 'white',
				fontSize: '38rpx',
				border: 'none'
			}
		};
	},
	// 在 onShow() 生命周期函数中读取 vuex 中的 openId,如果读取到则用户已登录
	onShow() {
		this.openId = this.vuex_token;
	},
	// 监听分享模态框，若显示则 tabBar 隐藏
	watch: {
		shareModelShow(newValue) {
			if (newValue) return uni.hideTabBar();
			uni.showTabBar();
		}
	},
	methods: {
		async login() {
			const result = await this.$u.utils.login();
			if (!result) return;
			// 获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面
			const pages = getCurrentPages();
			const page = pages.pop();
			page.onShow();
			this.$u.vuex('vuex_isHomeRefresh', true)		// 如果回到首页则在 onshow 中刷新下数据
		},
		// 监听底部每个服务项的点击事件
		async bottomItemClick(type_id) {
			// type_id 从 1 开始
			if (type_id === 1) {
				this.shareModelShow = true;
			} else if (type_id === 2) {
				this.$u.route('/myPackageA/pages/views/my-aboutus');
			} else if (type_id === 3) {
				this.$u.route('/myPackageA/pages/views/my-callservice'); // 跳转到 联系客服 页面
			} else if (type_id === 4) {
				// 点击了 入驻律小二 则跳转到律师入驻页面
				// 先判断用户是否已经入驻过了
				const res = await this.$u.api.getLawyerItemResult();
				if (!res) return;
				if (res.status === 0) {
					// 正在 审核中 的情况
					this.$u.route('/myPackageA/pages/views/submitted-for-review');
				} else if (res.status === -2) {
					// 还没有提交过申请的情况
					this.$u.route('myPackageA/pages/views/set-lawyer');
				} else {
					// 失败或成功页面,参数：0 表示失败，1 表示成功
					let result = res.status === 1 ? 1 : 0;
					this.$u.route('/myPackageA/pages/views/set-lawyer-result?state=' + result);
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.top-container-box {
	.user-box {
		width: 750rpx;
		height: 340rpx;
		padding: 42rpx 22rpx 0 27rpx;
		display: flex;
		position: relative;
		.user-img {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 750rpx;
			height: 340rpx;
			z-index: -1;
		}
		.user-text-box {
			display: flex;
			flex-direction: column;
			margin-left: 23rpx;
			padding-top: 15rpx;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
			line-height: 50rpx;
			.text2 {
				height: 21rpx;
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
	.item-box {
		width: 702rpx;
		position: absolute;
		top: 226rpx;
		left: 26rpx;
		border-radius: 20rpx;
		background-color: white;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 34rpx;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0, 214, 189, 0.41);
		.item {
			width: 25%;
			margin-top: 34rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			color: #141418;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
		}
	}
}
.bottom--container-box {
	width: 750rpx;
	margin-top: 203rpx;
	font-size: 32rpx;
	.bottom-item-box {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 35rpx 34rpx 25rpx;
		box-shadow: 0 1rpx 0 0 #e7eaf0;
		font-weight: 500;
	}
}
.my-login-box {
	position: relative;
	height: 750rpx;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;

	// 通过伪元素实现底部的“半圆”效果
	&::after {
		content: ' ';
		display: block;
		width: 100%;
		height: 40px;
		background-color: white;
		position: absolute;
		bottom: 0;
		left: 0;
		border-radius: 100%;
		transform: translateY(50%);
	}

	.loign-btn {
		width: 90%;
		margin: 15rpx 0rpx;
		background-color: $u-text-color;
		border-radius: 200rpx;
	}
	.text {
		font-size: 24rpx;
		color: gray;
	}
}
.share-container-box {
	width: 750rpx;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.85);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	.share-box {
		width: 603rpx;
		height: 1156rpx;
		background-color: white;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 33rpx 0;
		position: relative;
		.icon-box {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
